<!--日志管理-->
<template>
  <div class="addInformation">
    <div class="opNoticeTop">
      <div>
        <img src="/static/img/返回.png" @click="backClick">
        <span>{{titleVal}}</span>
      </div>
    </div>
    <div class="opNoticeMain">
      <div class="searchLogList">
        <div class="searchLogListLi">
          <div :class="{'signManageSearchRightSearch':true,'signManageSearchRightSearchSelect':issignManageSearchRightSearchSelect == '1'}" @click="searchFindClick(1)">已激活</div>
          <div :class="{'signManageSearchRightSearch':true,'signManageSearchRightSearchSelect':issignManageSearchRightSearchSelect == '2'}" @click="searchFindClick(2)">未激活</div>
          <div v-show="issignManageSearchRightSearchSelect == '2'">当前仍有{{dataList.length}}人未激活，请确认员工手机号是否正确</div>
        </div>
        <div class="searchLogListLiRight">
          <div :class="{'signManageSearchRightSearchR':true}" @click="searchFindClick(1)" v-show="issignManageSearchRightSearchSelect == '2'">全部发送激活短信</div>
        </div>
      </div>
      <div class="listLoglistMain">
        <ul>
          <li class="firstLi">
            <div class="firstLiSelect">
              <div @click="selectAllClick">
                <img v-show="selectAllShow" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                <img v-show="!selectAllShow" src="/static/img/iconfont_weixuan@2x.png" alt="">
              </div>
              <div>
                全选
              </div>
            </div>
            <div>
              姓名
            </div>
            <div>
              职位
            </div>
            <div>
              手机号
            </div>
            <div>
              部门
            </div>
            <div>
              完整部门
            </div>
            <div>
              添加时间
            </div>
            <div>
              操作
            </div>
          </li>
          <li class="dataLi" v-for="(item,index) in dataList" :key="index">
            <div class="dataLiSelect">
              <div @click="dataListClick(index)"> 
                <img v-show="item.show" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                <img v-show="!item.show" src="/static/img/iconfont_weixuan@2x.png" alt="">
              </div>
              <div></div>
            </div>
            <div>{{item.memberName | strFun}}</div>
            <div>{{item.position | strFun}}</div>
            <div>{{item.mobile | strFun}}</div>
            <div>{{item.memberName | strFun}}</div>
            <div>{{item.memberName | strFun}}</div>
            <div>{{item.activeStatus | activeFun}}</div>
            <div>发送激活短信</div>
          </li>
        </ul>
      </div>
      <div class="lastLi"  v-show="dataList.length > 0">
        <div>
        </div>
        <div>
          <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSizeNum"
            :current-page="currentPage" layout="total, sizes, prev, pager, next" :total="totalNum">
          </el-pagination> -->
          <!-- <el-pagination @current-change="handleCurrentChange" small layout="prev, pager, next" :total="totalNum">
          </el-pagination> -->
        </div>
      </div>
    </div>
    <!-- 删除分组 -->
    <v-del :deleteBoxShow="deleteBoxShow" :delTostVal="delTostVal" @canfirm="affirmdeleteBoxClick" @cancel="canceldeleteBoxClick"></v-del>
    <!-- 选择人员或者部门弹出框 -->
    <v-addPelete :isupdatePop="updatePopShow" @affirm="affirmUserListsClick" @cancel="cancelUserListsClick" :userselectpop="userselectpopLists"></v-addPelete>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import del from "../../cModel/del.vue";
import addPelete from "../../cModel/addDeptiUsers.vue";
export default {
  components: {
    "v-del": del,
    "v-addPelete": addPelete
  },
  data() {
    return {
      issignManageSearchRightSearchSelect: 1,
      updatePopShow: false, // 人员选择列表
      userselectpopListsArr: {},
      userselectpopLists: {}, // 已选中的人员-编辑时使用
      memberIdVals: [], // 成员id
      deptsIdVals: [], // 部门id
      deptListsArr: [],
      userListsArr: [],
      userInfoVal: "选择人或者部门", // 选中人和部门

      exporitClickTrue: false,
      opDeleteClickTrue: false,
      delTostVal: "", // 删除规范提示
      deleteBoxShow: false, // 删除分组
      advStartTime: "", // 开始时间
      advStartTimeNum: 0,
      advEndTime: "", // 结束时间
      advEndTimeNum: 0,
      pageSizeNum: 10,
      currentPage: 1,
      totalNum: 100,
      selectAllShow: false, // 全选展示
      dataList: [], // 日志数据
      submitTypeVal: 0, // 选择日周月
      deptIdsvallists: [],
      userIdsvallists: [],
      submitTypes: [{ name: "全部" }, { name: "已激活" }, { name: "未激活" }],
      titleVal: "激活情况统计"
    };
  },
  created: function() {
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      this.listsFun();
    } else {
      this.$router.push({
        path: "/login"
      });
    }
  },
  mounted() {},
  methods: {
    // 返回
    backClick() {
      var self = this;
      self.$router.push({
        path: "/home/business/statistics"
      });
    },
    // 选择成员
    setReceiverClick() {
      var self = this;
      this.$store.commit("setMutviewShow", true);
      this.updatePopShow = true;
      if (self.userselectpopListsArr) {
        self.userselectpopLists = self.userselectpopListsArr;
        this.$store.commit(
          "MutVuexuserselectpopCopyArr",
          self.userselectpopListsArr
        );
      }
    },
    // 选择人员确认
    affirmUserListsClick(val) {
      var self = this;
      this.$store.commit("setMutviewShow", false);
      self.deptListsArr = [];
      self.userListsArr = [];
      if (val) {
        if (val.userLists.length > 0 || val.deptLists.length > 0) {
          var userStr = "";
          if (val.userLists.length > 0) {
            val.userLists.forEach(function(ele, ind) {
              self.userListsArr.push(ele.memberId);
            });
            self.memberIdVals = self.userListsArr; // 成员id
            userStr =
              val.userLists[0].name + "等" + val.userLists.length + "个人员。";
          }
          var deptStr = "";
          if (val.deptLists.length > 0) {
            val.deptLists.forEach(function(ele, ind) {
              self.deptListsArr.push(ele.id);
            });
            self.deptsIdVals = self.deptListsArr; // 部门id
            deptStr =
              val.deptLists[0].name + "等" + val.deptLists.length + "个部门。";
          }
          self.userselectpopListsArr = {};
          self.userselectpopListsArr = val;
          self.userInfoVal = "你选择了" + deptStr + userStr;
        } else {
          self.userselectpopListsArr = {};
          self.memberIdVals = [];
          self.deptsIdVals = [];
          self.userInfoVal = "请选择部门或者成员";
        }
      } else {
        self.userselectpopListsArr = {};
        self.memberIdVals = [];
        self.deptsIdVals = [];
        self.userInfoVal = "请选择部门或者成员";
      }
      this.updatePopShow = false;
    },
    // 选择人员取消
    cancelUserListsClick(val) {
      var self = this;
      this.$store.commit("setMutviewShow", false);
      this.updatePopShow = false;
      if (val.userLists.length > 0 || val.deptLists.length > 0) {
        this.userselectpopListsArr = {};
        this.userselectpopListsArr = val;
      }
    },

    // 删除日志确认
    affirmdeleteBoxClick() {
      var self = this;
      this.deleteBoxShow = false;
      var deleArr = [];
      self.dataList.forEach(function(ele, ind) {
        if (ele.show == true) {
          deleArr.push(ele.logId);
        }
      });
      if (deleArr.length > 0) {
        if (self.opDeleteClickTrue == false) {
          self.opDeleteClickTrue = true;
          self
            .getweblogmanagedelete(JSON.stringify({ logIds: deleArr }))
            .then(data => {
              self.opDeleteClickTrue = false;
              if (data.statusCode == 200) {
                self.$message({
                  type: "success",
                  message: "删除成功"
                });
                self.selectAllShow = false;
                self.listsFun();
              } else {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
              }
            })
            .catch(msg => {
              self.opDeleteClickTrue = false;
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        }
      } else {
        self.$message({
          type: "info",
          message: "请选择要删除的日志"
        });
      }
    },
    // 删除日志取消
    canceldeleteBoxClick() {
      var self = this;
      this.deleteBoxShow = false;
    },
    // 删除日志弹出
    opDeleteClick(index) {
      var self = this;
      var deleArr = [];
      self.dataList.forEach(function(ele, ind) {
        if (ele.show == true) {
          deleArr.push(ele.logId);
        }
      });
      if (deleArr.length > 0) {
        this.deleteBoxShow = true;
        this.delTostVal = "删除该日志后，无法恢复！！！";
      } else {
        self.$message({
          type: "info",
          message: "请选择要删除的日志"
        });
      }
    },
    dataFun(val) {
      var standardTime = new Date(val * 1);
      var y, m, d, h, f;
      y = standardTime.getFullYear();
      m = standardTime.getMonth() + 1;
      m = m > 9 ? m : "0" + m;
      d = standardTime.getDate();
      d = d > 9 ? d : "0" + d;
      h = standardTime.getHours();
      h = h > 9 ? h : "0" + h;
      f = standardTime.getMinutes();
      f = f > 9 ? f : "0" + f;
      return y + "-" + m + "-" + d;
    },
    // 日志类型选择
    submitTypeValChange() {
      console.log(this.submitTypeVal);
    },
    // 开始时间
    advStartTimeChange() {
      var self = this;
      this.advStartTimeNum = Date.parse(this.advStartTime);
      if (this.advEndTimeNum && this.advStartTimeNum) {
        if (this.advEndTimeNum < this.advStartTimeNum) {
          self.$message({
            type: "info",
            message: "结束时间不能小于开始时间！"
          });
          this.advStartTime = "";
          this.advStartTimeNum = 0;
        } else {
        }
      }
    },
    //结束时间
    advEndTimeChange() {
      var self = this;
      this.advEndTimeNum = Date.parse(this.advEndTime);
      if (this.advEndTimeNum && this.advStartTimeNum) {
        if (this.advEndTimeNum < this.advStartTimeNum) {
          self.$message({
            type: "info",
            message: "结束时间不能小于开始时间！"
          });
          this.advEndTime = "";
          this.advEndTimeNum = "";
        } else {
        }
      }
    },

    // 导出
    exporitClick() {
      var self = this;
      if (self.exporitClickTrue == false) {
        self.exporitClickTrue = true;
        var lisObj = {
          memberId: sessionStorage.getItem("memberId"),
          orgId: sessionStorage.getItem("ORGID"),
          submitType: 0
        };
        if (self.advStartTime) {
          var advStartT = self.dataFun(self.advStartTime);
          lisObj["startDate"] = advStartT;
        }
        if (self.advEndTime) {
          var advEndT = self.dataFun(self.advEndTime);
          lisObj["endDate"] = advEndT;
        }
        if (self.submitTypeVal != 0) {
          lisObj["submitType"] = self.submitTypeVal;
        }
        if (self.deptListsArr.length > 0) {
          lisObj["deptIds"] = self.deptListsArr;
        }
        if (self.userListsArr.length > 0) {
          lisObj["userIds"] = self.userListsArr;
        }
        self
          .getweblogsearchexport(lisObj)
          .then(data => {
            self.exporitClickTrue = false;
            if (data.statusCode) {
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            } else {
              var path =
                "https://app.botong.tech/log/web/log/manage/export?orgId=" +
                sessionStorage.getItem("ORGID") +
                "&memberId=" +
                sessionStorage.getItem("memberId") +
                "&submitType=" +
                self.submitTypeVal;
              if (self.deptListsArr.length > 0) {
                path = path + "&deptIds=" + self.deptListsArr;
              }
              if (self.userListsArr.length > 0) {
                path = path + "&userIds=" + self.userListsArr;
              }
              if (self.advStartTime) {
                path = path + "&startDate=" + advStartT;
              }
              if (self.advEndTime) {
                path = path + "&endDate=" + advEndT;
              }
              window.open(path);
            }
          })
          .catch(msg => {
            self.exporitClickTrue = false;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 初始化数据
    listsFun() {
      var self = this;
      self.dataList = [];
      self.tselectAllShow = false;
      var lisObj = {
        companyId: sessionStorage.getItem("ORGID"),
        activeStatus: "ACTIVE"
      };
      self
        .getapiorgmembers(JSON.stringify(lisObj))
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.dataList = data.data;
            } else {
              self.dataList = [];
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 列表选择
    dataListClick(index) {
      var self = this;
      this.dataList[index].show = !this.dataList[index].show;
      var selectArr = [];
      this.dataList.forEach(function(ele, ind) {
        if (ele.show == true) {
          selectArr.push(ele);
        }
      });
      if (selectArr.length == self.dataList.length) {
        self.selectAllShow = true;
      } else {
        self.selectAllShow = false;
      }
    },
    // 全选
    selectAllClick() {
      var self = this;
      this.selectAllShow = !this.selectAllShow;
      this.dataList.forEach(function(ele, ind) {
        ele.show = self.selectAllShow;
      });
    },
    //分页-当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchFindClick();
      // this.listsFun();
    },
    // 分页-每页条数
    handleSizeChange(val) {
      this.pageSizeNum = val;
      this.searchFindClick();
    },
    ...mapActions([
      "getapiorgmembers",
      "getweblogmanagedelete",
      "getweblogsearchexport"
    ])
  },
  filters: {
    activeFun(val) {
      if (val == "ACTIVE") {
        return "已激活";
      } else if (val == "INACTIVE") {
        return "未激活";
      } else {
        return "暂无";
      }
    },
    timeFun(val) {
      if (val) {
        var standardTime = new Date(val * 1);
        var y, m, d, h, f, s;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        s = standardTime.getSeconds();
        s = s > 9 ? s : "0" + s;
        return y + "-" + m + "-" + d + " " + h + ":" + f + ":" + s;
      } else {
        return "暂无";
      }
    },
    typeFun: function(val) {
      if (val == 1) {
        return "部门";
      } else {
        return "人员";
      }
    },
    strFun: function(val) {
      if (val) {
        return val;
      } else {
        return "暂无";
      }
    },
    weekFun(val) {
      if (val == 7) {
        return "日";
      } else if (val == 1) {
        return "一";
      } else if (val == 2) {
        return "二";
      } else if (val == 3) {
        return "三";
      } else if (val == 4) {
        return "四";
      } else if (val == 5) {
        return "五";
      } else if (val == 6) {
        return "六";
      }
    }
  },
  watch: {}
};
</script>
<style scoped>
.dataLiSelect > div:nth-child(1) {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  cursor: pointer;
}
.dataLiSelect > div:nth-child(2) {
  height: 28px;
  width: 28px;
}
.dataLiSelect > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}
.dataLiSelect {
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
}
.firstLiSelect {
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
}
.firstLiSelect > div:nth-child(1) {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  cursor: pointer;
}
.firstLiSelect > div:nth-child(1) img {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
}
.firstLiSelect > div {
  height: 50px;
}
.firstLi {
  background-color: #f4f4f6;
}
.firstLi,
.dataLi {
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.firstLi > div,
.dataLi > div {
  width: 20%;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.lastLi {
  height: 60px;
  display: flex;
  justify-content: space-between;
  margin: 35px 0;
}
.signManageSearchRightSearchSelect {
  color: #288df0 !important;
  background-color: #fff !important;
  border: 1px solid #288df0 !important;
}
.signManageSearchRightSearchR {
  width: 150px;
  height: 34px;
  cursor: pointer;
  border-radius: 3px;
  background-color: #288df0;
  text-align: center;
  line-height: 34px;
  color: #fff;
  margin-right: 15px;
}
.signManageSearchRightSearch {
  width: 70px;
  height: 34px;
  cursor: pointer;
  border-radius: 3px;
  background-color: #288df0;
  text-align: center;
  line-height: 34px;
  color: #fff;
  margin-right: 15px;
}

.listLoglistMainOPent {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: flex-end;
}

.searchLogListLiRightSelect select {
  width: 150px;
  height: 30px;
  border: 1px solid #38adff;
  border-radius: 3px;
  line-height: 30px;
  padding-left: 7px;
}

.searchLogListLiRightSelect {
  width: 180px;
  height: 30px;
  border-radius: 3px;
  line-height: 30px;
}

.searchLogListLiRightPeo {
  width: 250px;
  height: 30px;
  border: 1px solid #38adff;
  border-radius: 3px;
  line-height: 30px;
  padding-left: 7px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.searchLogListLiRightTime > div:nth-child(2) {
  margin-left: 10px;
}

.searchLogListLiRightTime {
  display: flex;
}

.searchLogListLiLeft {
  width: 80px;
  text-align: right;
  margin-right: 15px;
}
.searchLogListLiRight {
  display: flex;
  width: 175px;
  height: 35px;
  float: right;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}
.searchLogListLi {
  display: flex;
  width: 65%;
  height: 35px;
  float: left;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.searchLogList {
  margin-top: 30px;
  height: 75px;
  width: 100%;
}

.listLoglistMain {
  margin-top: 10px;
  min-height: 190px;
  width: 100%;
  border: 1px solid #ccc;
}

.addInformation {
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  min-height: 500px;
  padding-bottom: 20px;
}

.opNoticeTop div {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  width: calc(100% - 88px);
  border-bottom: 1px solid #d9d9d9;
  /* height:  */
  position: relative;
}

.opNoticeTop div span {
  margin-left: 28px;
}

.opNoticeTop div img {
  position: absolute;
  top: 24px;
  cursor: pointer;
}

.opNoticeTop {
  width: 100%;
}

.opNoticeMain {
  margin-left: 44px;
  width: calc(100% - 88px);
  min-height: 400px;
}
</style>